
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>SpringAI赋能Java开发打造智能应用 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>SpringAI赋能Java开发打造智能应用 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">SpringAI 是什么？它的主要目标是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">SpringAI 是 Spring 官方推出的 AI 集成框架，其主要目标是让 Java 应用程序能够轻松地获得 AI 能力，例如理解自然语言、自动生成代码和智能分析数据等。</div>
          </div>
          <div class="card-source">来源: 一、SpringAI是什么？为什么你需要它？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">SpringAI 提供了哪些核心功能？请列举四个主要方面。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">SpringAI 的核心功能主要包括四个方面：1. 自然语言处理（NLP），如文本分类和情感分析；2. 内容生成，如代码生成和文档撰写；3. 智能决策，如数据预测和推荐系统；4. 多模型支持，包括 OpenAI、Azure AI 和本地模型。</div>
          </div>
          <div class="card-source">来源: 二、SpringAI核心功能一览</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">根据文档，设计高效的 Prompt 有哪些技巧？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">设计高效 Prompt 的三个主要技巧是：1. 明确角色：预先定义 AI 的身份（如“你是一个电商客服专家”）；2. 提供上下文：给予 AI 足够的业务背景信息，使其更好地理解任务；3. 限制输出格式：指定期望的输出格式，以便于程序进行后续处理。</div>
          </div>
          <div class="card-source">来源: 5.1 Prompt设计技巧</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在智能客服系统的代码实现中，如何配置 OpenAI 的 API 密钥和指定使用的模型？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在 `application.yaml` 或 `application.properties` 文件中，通过 `spring.ai.openai.api-key` 属性配置 API 密钥，并通过 `spring.ai.openai.chat.model` 属性指定要使用的聊天模型，例如 `gpt-4-turbo`。</div>
          </div>
          <div class="card-source">来源: 3.2 代码实现 - 第二步：配置API密钥</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在智能客服案例中，`AiCustomerService` 是如何与 AI 模型进行交互的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在 `AiCustomerService` 中，通过依赖注入 `ChatClient` 对象。然后，它构造一个包含角色定义、上下文信息和用户问题的完整提示（Prompt），最后调用 `chatClient.call(prompt)` 方法将请求发送给 AI 模型并返回其响应。</div>
          </div>
          <div class="card-source">来源: 3.2 代码实现 - 第三步：实现智能对话</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">为优化 SpringAI 应用性能，文档中提到了哪三种方法？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中提到的三种性能优化方法是：1. 缓存常用结果，以减少不必要的 API 调用；2. 批量处理请求，以提高系统吞吐量；3. 采用异步调用，以避免阻塞主线程。</div>
          </div>
          <div class="card-source">来源: 5.2 性能优化</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">安全</div>
          <div class="card-question">为了保护 SpringAI 应用免受 Prompt 注入等安全威胁，应采取哪些防护措施？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">安全</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">应采取三种安全防护措施：1. 输入校验，以防止恶意的 Prompt 注入；2. 输出过滤，用于屏蔽返回结果中的敏感信息；3. 访问控制，通过限制 API 调用频率等方式进行保护。</div>
          </div>
          <div class="card-source">来源: 5.3 安全防护</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">与传统开发方式相比，SpringAI 在开发效率和维护成本方面有哪些优势？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在开发效率方面，SpringAI 可以自动生成代码，而传统开发需要手动实现复杂逻辑。在维护成本方面，使用 SpringAI 的成本较低，而传统开发则较高。</div>
          </div>
          <div class="card-source">来源: 一、SpringAI是什么？为什么你需要它？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">文档中描述的 AI 驱动开发新范式包含哪几个核心理念？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">AI 驱动的开发范式包含三个核心理念：1. 需求自动转化：将自然语言描述的需求直接生成业务代码；2. 智能调试与优化：利用 AI 辅助定位和修复 Bug；3. 自适应系统：系统能根据运行时的数据自动调整其行为。</div>
          </div>
          <div class="card-source">来源: 六、AI驱动的开发范式</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
